<template>
  <div class="deleteBox">
    <a-modal
      v-model:visible="show"
      :maskClosable="false"
      :width="420"
      :centered="true"
      :okText="okText"
      :cancel-text="cancelText"
      title="提示"
      @ok="okData"
      @cancel="cancelData"
      :destroyOnClose="true"
    >
      <div class="textDiv"><img src="../../assets/images/warning.png" alt="">{{promptText}}</div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref, watch} from 'vue';
  import { message } from 'ant-design-vue';
  onMounted(() => {
  });
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    // 确认按钮名称
    okText: {
      type: String,
      default: '确认',
    },
    cancelText: {
      type: String,
      default: '我再想想',
    },
    promptText: {
      type: String,
      default: '是否确认操作',
    }
  });
let show = ref(false)
  watch(props, (val) => {
    show.value = props.isShow
  },{deep: true});
  const emit = defineEmits(['ok', 'cancel']);
  function okData() {
    emit('ok');
  }
  function cancelData() {
    show.value = false
    emit('cancel');
  }
</script>
<style lang="less" scoped>
.textDiv{
  display: flex;
  padding: 32px 20px;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  color: #303133;
  img{
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }
}
</style>
